<template>
	<view class="content">
		<view class="fortune_contianer">
			<view class="fortune_box">
				<view class="box_section_1">
					<text class="default_text_title">当前福分</text>
				</view>
				<view class="box_section_2">
					<view class="fortune_text">
						<text class="num-font">{{currentFortune || 0}}</text>
						<text>约{{fortuneToMoney}}元</text>
					</view>
				</view>
				<view class="box_section_3">
					<view class="tab">
						<text class="default_text_title">今日福分</text>
						<text>{{todayFortune}}</text>
					</view>
					<view class="tab">
						<text class="default_text_title">累积福分</text>
						<text>{{totalFortune}}</text>
					</view>
					<view class="tab">
						<text class="default_text_title">Fucoin/CNY</text>
						<text>{{ratio}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="other_contianer">
			<view class="fortuneChartTitle">近7天福分变化</view>
			<canvas canvas-id="fortuneChart" id="fortuneChart" class="charts" @touchstart="touchArea" :style="{'width':chart.cWidth * chart.pixelRatio+'px','height':chart.cHeight * chart.pixelRatio+'px', 'transform': 'scale('+(1/chart.pixelRatio)+')'}"></canvas>
			<view class="model_section">
				<view class="section_nav">
					<view class="nav_title">
						<text>福分活动</text>
					</view>
				</view>
				<view class="fortune_activity">
					<view class="activity" @tap="toFortuneTask">
						<image src="static/fortuneTask.png"></image>
						<text>每日送福分</text>
						<text>签到等每日福利</text>
					</view>
					<view class="activity" @tap="toPlayGames">
						<image src="static/fortuneGame.png"></image>
						<text>福分小游戏</text>
						<text>玩小游戏，赚大福分</text>
					</view>
				</view>
			</view>

			<view class="model_section">
				<view class="section_nav">
					<view class="nav_title">
						<text>福分兑换优惠券</text>
					</view>
					<text>兑换中心</text>
				</view>
				<view class="" v-if="conponList.length > 0"></view>
				<view class="no_has_conpon" v-else>
					<text>当前没有任何优惠券，快去领券中心看看吧</text>
				</view>
			</view>
			<view class="model_section">
				<view class="section_nav">
					<view class="nav_title">
						<text>福分明细</text>
						<text>（系统只保留最近7天的福分明细）</text>
					</view>
				</view>
				<view class="fortune_detailed">
					<!-- <template v-if="fortuneDetailedListLen > 0"> -->
					<!-- <view class="fortune-list">
						<app-tabs v-model="tabIndex" :tabs="tabs" :fixed="false" @change="tabChange"></app-tabs>
						<scroll-item ref="mescrollItem" v-for="(tab,index) in tabs" :i="index" :key="index" :index="tabIndex"></scroll-item>
					</view> -->
					<!-- </template> -->
					<!-- <template v-else> -->
						<view style="display: flex;height: 68upx;flex-flow: row nowrap;background-color: rgba(240, 243, 245, 1);font-size: 24upx;color: #000;border-radius: 20upx 20upx 0 0;">
							<text style="flex: 1;display: flex;justify-content: center;align-items: center;">全部</text>
							<text style="flex: 1;display: flex;justify-content: center;align-items: center;">收入</text>
							<text style="flex: 1;display: flex;justify-content: center;align-items: center;">支出</text>
						</view>
						<view style="color: rgba(172, 173, 174, 1);font-size: 24upx;padding: 77upx 0;box-sizing: border-box;text-align: center;">暂时没有福分明细</view>
					<!-- </template> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import uCharts from '@/components/u-charts/u-charts/u-charts.js'
	
	import AppTabs from "@/components/app-tabs.vue";
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import ScrollItem from "@/components/scroll-items/fortune-item.vue";
	
	let _this;
	let canvasFortune = null; //福分图标实例
	export default {
		mixins:[MescrollMoreMixin],
		components: {
			AppTabs,
			ScrollItem
		},
		computed:{ 
			//福分对应现金转换
			fortuneToMoney(){
				return parseFloat(this.currentFortune * this.ratio).toFixed(2)
			}
		},
		data() {
			return {
				currentFortune: 0, //当前福分 
				todayFortune: 0, //今日福分
				totalFortune: 0, //累积福分
				ratio: 0, //福分兑人民币的比值
				maxFortune: 1,
				chart: {
					cWidth: '',
					cHeight: '',
					pixelRatio: 1,
					chartData: {
						categories: [],
						series: [{
							name: '福分涨幅曲线',
							data: [],
							color: '#FFBC21'
						}]
					}
				},
				conponList:[], //卡券列表
				tabs:['全部','收入','支出'],
				tabIndex: 0
			};
		},

		onLoad(options) {
			// this.loadData()
			// //#ifndef MP

			// //#endif
			// //#ifdef MP
			// if (options.state == 0) {
			// 	this.loadData()
			// }
			// //#endif

		},
		onShow(){
			this.loadData()
		},


		methods: {

			async loadData() {
				_this = this;
				uni.getSystemInfo({
					success: (res) => {
						if (res.pixelRatio > 1) this.pixelRatio = 2;
					}
				})
				this.chart.cWidth = uni.upx2px(750);
				this.chart.cHeight = uni.upx2px(436);

				let params = {},
					method = 'post',
					data = await Api.apiCall(method, Api.fortune.fortune_center, params);

				if (data) {
					this.chart.chartData.categories = data.days;
					this.chart.chartData.series[0].data = data.fortunes;
					this.maxFortune = Math.max.apply(null, data.fortunes)
					// this.chart.chartData.series[0].data = [0.1, 0.3, 0.4, 0.6, 0.8, 0.9];
					this.currentFortune = data.fortune;
					this.todayFortune = data.day_fortune;
					this.totalFortune = data.total_fortune;
					this.ratio = data.price;
				}
				console.log(JSON.stringify(this.chart.chartData));
				this.$nextTick(() => {
					this.showFortuneChart('fortuneChart', this.chart.chartData);
				})
			},
			touchArea(e) {
				canvasFortune.showToolTip(e, {
					format: (item, category) => {
						return `福分价格：${item.data}`
					}
				});
			},

			toFortuneTask() {
				uni.navigateTo({
					url:'/fortune/fortuneTask'
				})
			},
			toPlayGames() {
				uni.navigateTo({
					url:'/fortune/fortuneGame'
				})
			},

			showFortuneChart(canvasId, chartData) {
				canvasFortune = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'area',
					legend: {
						show: false //是否隐藏X轴图例
					},
					dataLabel: false, //
					fontSize: 11,
					dataPointShape: true,
					pixelRatio: _this.chart.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					duration: 1000, //动画时长
					dataPointShape: false, //是否在图表中显示数据点图形标识
					xAxis: {
						disableGrid: true, //是否禁止显示网格
						fontColor: '#E1E4E5', //字体颜色
						axisLineColor: '#E1E4E5', //坐标轴颜色
						fontSize: 10, //X轴数据标签字体大小
					},
					yAxis: {
						data: [{
							axisLineColor: '#E1E4E5', //坐标轴颜色
							fontColor: '#E1E4E5', //字体颜色	
							fontSize: 10, //y轴数据标签字体大小		
							min: 0, //数值最小值为0		
							max: _this.maxFortune, //数值最大值为1
							format: (val) => {
								return parseFloat(val).toFixed(2)
							}
						}],
						gridType: 'dash',
						dashLength: 3,
						gridColor: '#E1E4E5',
						disableGrid: false, //是否禁止显示网格
					},
					extra: {
						area: {
							type: 'curve',
							gradient: true,
							addLine: true,
							opacity: 0.6
						},
						tooptip: {
							showBox: false, //是否显示半透明黑色的提示区域
							bgColor: '#000', //主体背景颜色
							bgOpacity: 0.7, //背景颜色透明度
							gridType: 'dash', //辅助线类型（虚线）
							dashLength: 2, //虚线单段长度
							gridColor: '#1890ff', //辅助线颜色
							fontColor: '#FFFFFF', //主体文字颜色
							horizentalLine: true, //是否显示横向辅助线
							xAxisLabel: true, //是否显示X轴辅助标签
							yAxisLabel: true, //是否显示Y轴辅助标签
							labelBgColor: '#DFE8FF', //标签背景颜色
							labelBgOpacity: 0.95, //背景颜色透明度
							labelFontColor: '#666666' //标签文字颜色
						}
					},
					width: _this.chart.cWidth * _this.chart.pixelRatio,
					height: _this.chart.cHeight * _this.chart.pixelRatio
				});
			}
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #FFBC21;
	}

	.default_text_title {
		font-size: 25upx;
		color: #ABADAD;
	}
	
	.content {
		.fortune_contianer {
			box-sizing: border-box;
			padding: 0 50upx 50upx;

			.fortune_box {
				box-sizing: border-box;
				padding: 25upx;
				background-color: #FFF;
				width: 100%;
				border-radius: 20upx;
				display: flex;
				flex-flow: column wrap;
				box-shadow: 0 5upx 10upx rgba(204, 66, 66, 0.2);

				.box_section_1,
				.box_section_2 {
					flex: 1;
					display: flex;
					justify-content: center;

					.fortune_text {
						display: flex;
						flex-flow: row nowrap;
						// justify-content: center;
						align-items: flex-start;
						height: 85upx;

						text {
							&:first-child {
								font-size: 78upx;
								color: #E52631;
								line-height: 60upx;
							}

							&:last-child {
								height: 38upx;
								font-size: 24upx;
								display: inline-flex;
								flex-flow: row nowrap;
								justify-content: center;
								align-items: center;
								color: #FFF;
								background-color: #FFBC21;
								border-radius: 19upx 19upx 19upx 0;
								box-sizing: border-box;
								padding: 0 15upx;
								margin-left: 21upx;
							}
						}
					}
				}

				.box_section_2 {
					margin: 50upx 0;
				}

				.box_section_3 {
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;

					.tab {
						display: inline-flex;
						flex-flow: column wrap;
						align-items: center;

						text {
							&:last-child {
								margin-top: 21upx;
								font-size: 28upx;
								color: #232323;
							}
						}

					}
				}
			}
		}

		.other_contianer {
			width: 100vw;
			height: 100%;
			background-color: #FFF;

			.fortuneChartTitle {
				width: 100vw;
				text-align: center;
				font-size: 28upx;
				color: rgba(35, 35, 35, 1);
				margin-bottom: 50upx;
				padding-top: 50upx;
			}

			.model_section {
				box-sizing: border-box;
				padding: 30upx;

				.section_nav {
					width: 100%;
					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					justify-content: space-between;
					color: rgba(172, 173, 174, 1);
					font-size: 24upx;
					margin-bottom: 34upx;

					.nav_title {
						display: flex;
						align-items: center;
						justify-content: flex-start;

						text {
							&:first-child {
								color: rgba(35, 35, 35, 1);
								font-weight: bold;
								letter-spacing: 1.5px;
								font-size: 32upx;
								margin-right: 17upx;
							}
						}
					}
				}

				.fortune_activity {
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;

					.activity {
						width: 330upx;
						height: 204upx;
						border-radius: 20upx;
						display: flex;
						flex-flow: column wrap;
						justify-content: center;
						align-items: center;
						color: #FFF;
						position: relative;
						image{
							width: 100%;
							height: 100%;
							position: absolute;
							
						}

						&:first-child {
							background-image: linear-gradient(to bottom, rgba(255, 194, 106, 1), rgba(255, 84, 79, 1));
						}

						&:last-child {
							background-image: linear-gradient(to bottom, rgba(255, 182, 150, 1), rgba(255, 97, 129, 1));
						}

						text {
							font-size: 24upx;

							&:first-child {
								font-weight: 400;
								font-size: 32upx;
								margin-bottom: 16upx;
							}
						}
					}
				}

				.no_has_conpon {
					display: flex;
					align-items: center;
					flex-flow: row nowrap;
					justify-content: center;
					font-size: 24upx;
					border-radius: 10upx;
					height: 222upx;
					color: rgba(172, 173, 174, 1);
					background-color: rgba(239, 242, 244, 1);
				}
				
				.fortune_detailed{
					.app-tabs {
						border-radius: 20upx 20upx 0 0;
						border-bottom: unset;
						background-color: #F0F3F5;
						.tabs-item{
							.active{
								background-color: #FFF;
								border-radius: 20upx 20upx 0 0;
								transition: all 200ms ease-in-out; 
							}
						}
					}
					.fortune-list{
						box-shadow: 0 5upx 15upx rgba(167, 167, 167, 0.4);
						border-radius: 20upx;
					}
				}
			}
		}
	}
</style>
